<template>
  <div>
    <div id="canvas-show">
    </div>
    <div id="label"></div>
  </div>
</template>

<script>
  import * as THREE from "three";
  import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";
  import Stats from "three/examples/jsm/libs/stats.module";
  import {Store} from "../building/Store";
  import {StoreGroup} from "../api/StoreGroup";
  import {Goods,judgmentObject} from "../building/Goods";
  import {StoreShelf} from "../building/StoreShelf";
  import {transPosition} from "../utils/CommonUtils";
  import {initObjectSelect} from "../building/ObjectSelect";
  import {OutlinePass} from "three/examples/jsm/postprocessing/OutlinePass";
  import {RenderPass} from "three/examples/jsm/postprocessing/RenderPass";
  import {EffectComposer} from "three/examples/jsm/postprocessing/EffectComposer";



  var renderer;//渲染器
  var scene;//场景
  var camera;//相机
  var amblight;//环境光
  var light;//平行光
  var pointLight1;//点光源1
  var pointLight2;//点光源2
  var control;//轨道控件
  var stats;//帧数控件
  var CarObject;//小车对象
  var composer;//效果组合器对象

  export default {
    name: "show",
    components:{},
    props:["Geometry","type"],
    data(){
      return{
        width:'',
        height:'',
        objects:[],//存放添加到场景中的几何体，方便选中操作
        outlinePass:'',//边框高亮通道对象
        renderPass:'',//渲染通道对象

      }
    },
    computed:{},
    watch:{},
    created() {
    },
    mounted() {
      this.width=document.getElementById("canvas-show").clientWidth;
      this.height=document.getElementById("canvas-show").clientHeight;
      this.threeStart();
    },
    methods: {
      threeStart(){
        //初始化渲染器
        this.initThree();
        //初始化场景
        this.initScene();
        //初始化相机
        this.initCamera();
        //初始化灯光
        this.initLight();
        //初始化几何体
        this.initObject();
        //初始化后期效果通道
        this.initPass();
        //初始化效果组合器
        this.initComposer();
        //初始化控件
        this.initControls();
        //循环渲染
        this.animation();
      },
      initThree(){
        renderer=new THREE.WebGLRenderer({
          antialias:true,
          alpha:true
          //用来解决模型重叠部分不停闪烁问题
          // logarithmicDepthBuffer: true
        });
        renderer.setSize(this.width,this.height);
        renderer.setClearColor(0x39609B);
        renderer.setPixelRatio(window.devicePixelRatio);
        document.getElementById("canvas-show").appendChild(renderer.domElement);
        window.addEventListener("resize",this.onWindowResize,false);
      },
      initScene(){
        scene=new THREE.Scene();
      },
      initPass(){
        //创建选中边框高亮的通道
        this.outlinePass = new OutlinePass(new THREE.Vector2(this.width,this.height),scene,camera);
        this.outlinePass.edgeStrength=10;//包围线浓度
        this.outlinePass.edgeGlow=0.1;//边缘线范围
        this.outlinePass.edgeThickness=1;//边缘线浓度
        this.outlinePass.pulsePeriod=2;//包围线闪烁频率
        this.outlinePass.visibleEdgeColor.set("#29e716")//包围线颜色
        this.outlinePass.hiddenEdgeColor.set("#190a05")//遮挡部分的边界线颜色
      },
      initComposer(){
        this.renderPass = new RenderPass(scene,camera);
        composer = new EffectComposer(renderer);
        composer.addPass(this.renderPass);
        composer.addPass(this.outlinePass);
      },
      initCamera(){
        camera=new THREE.PerspectiveCamera(
          50,
          this.width/this.height,
          1,10000
        );
        camera.position.set(1300,0,0);
        camera.lookAt(0,0,0);
        scene.add(camera);
      },
      initLight(){
        //添加环境光
        amblight=new THREE.AmbientLight(0xffffff,1);
        amblight.position.set(0,0,0);
        scene.add(amblight);
        //添加平行光
        light=new THREE.DirectionalLight(0xffffff,0.3);
        light.position.set(0,200,0);
        scene.add(light);
        //添加点光源
        pointLight1=new THREE.PointLight(0xffffff,0.3);
        pointLight1.position.set(-500,200,0);
        pointLight2=new THREE.PointLight(0xffffff,0.3);
        pointLight2.position.set(500,200,0);
        scene.add(pointLight1);
        scene.add(pointLight2);
      },
      initObject(){
        switch (this.type) {
          case "S":{
            //获取库区几何体对象信息
            let mesh = Store(this.Geometry);
            mesh.position.set(0,0,0)
            scene.add(mesh);
            this.objects.push(mesh)
            let groups = this.Geometry.groups;
            for (var i=0;i<groups.length;i++){
              let group = groups[i];
              //初始化货架
              let mesh3 = StoreShelf(group);
              let mesh4 = StoreGroup(group,1);
              this.objects.push(mesh3);
              scene.add(mesh3);
              this.objects.push(mesh4)
              scene.add(mesh4);
              let bins = group.bins;
              for (var j=0;j<bins.length;j++){
                let bin = bins[j];
                let number = judgmentObject(bin.state);
                let mesh5 = Goods(group,bin,number);
                mesh5.type="StoreGoods";
                scene.add(mesh5);
                this.objects.push(mesh5)
              }
            }
            break;
          }
          case "G":{
            //初始化货架
            let mesh3 = StoreShelf(this.Geometry);
            let mesh4 = StoreGroup(this.Geometry,1);
            this.objects.push(mesh3);
            scene.add(mesh3);
            this.objects.push(mesh4)
            scene.add(mesh4);
            let bins = this.Geometry.bins;
            for (var j=0;j<bins.length;j++){
              let bin = bins[j];
              let number = judgmentObject(bin.state);
              let mesh5 = Goods(this.Geometry,bin,number);
              mesh5.type="StoreGoods";
              scene.add(mesh5);
              this.objects.push(mesh5)
            }
            break;
          }
          default:{
            break;
          }
        }
        //在几何体下面加上展示台 todo
      },
      initControls(){
        control=new OrbitControls(camera,renderer.domElement);
        //设置相机启动阻尼
        control.enableDamping=true
        control.dampingFactor = 0.5;
        // 视角最小距离
        control.minDistance = 0;
        // 视角最远距离
        control.maxDistance = 20000;
        // 最大角度
        control.maxPolarAngle = Math.PI / 2.2;

        stats=new Stats();
        document.body.appendChild(stats.dom)

        //初始化物体选中控件
        initObjectSelect(scene,camera,this.outlinePass);
      },
      animation(){
        requestAnimationFrame( this.animation );
        stats.update();
        this.render();
      },
      render(){
        renderer.clear();
        renderer.render(scene,camera);
      },
      onWindowResize(){
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize( window.innerWidth, window.innerHeight );
      },
    }
  }
</script>

<style scoped>
#canvas-show{
  width: 100%;
  height: 810px;
  border: red 1px dashed;
}
#label {
  position: absolute;
  padding: 10px;
  background: rgba(255, 255, 255, 0.6);
  line-height: 1;
  color:#000000;
  border-radius: 5px;
  display:none;
}
</style>
